<script setup>
import { useI18n } from "vue-i18n"
const { t } = useI18n();
</script>
<template>
    <div class="main">
        <router-view />
        <div class="fixed  bottom-0  w-full bg-gray-100 z-10  shadow-inner" style="max-width: 440px;">
            <div class="max-w-screen-xl mx-auto px-4 sm:px-6">
                <div class="flex justify-between items-center pt-1">
                    <router-link to="/" class="flex flex-col items-center justify-end gap-0.5">
                        <img src="/images/h.jpg" alt="logo" class="max-w-2.5" />
                        <div>{{ $t('Home') }}</div>
                    </router-link>
                    <router-link to="/cart" class="flex flex-col items-center justify-end gap-0.5">
                        <img src="/images/s.jpg" alt="logo" class="max-w-2.5" />
                        <div>{{ $t('Order') }}</div>
                    </router-link>
                    <router-link to="/task" class="flex flex-col items-center justify-end gap-0.5">
                        <img src="/images/o.jpg" alt="logo" class="max-w-2.5" />
                        <div>{{ $t('Task') }}</div>
                    </router-link>
                    <router-link to="/customer-service" class="flex flex-col items-center justify-end gap-0.5">
                        <img src="/images/cs.jpg" alt="logo" class="max-w-2.5" />
                        <div>{{ $t('Help') }}</div>
                    </router-link>
                    <router-link to="/my" class="flex flex-col items-center justify-end gap-0.5">
                        <img src="/images/p.jpg" alt="logo" class="max-w-2.5" />
                        <div>{{ $t('Mine') }}</div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>
